import * as echart from 'echarts';

import * as React from 'react';

interface IProps {
   
    height: number;
    title: string;
    subtitle: string;
    seriesName: string;
    legendData: string[];
    data?: any[];
}

class Pie extends React.Component<IProps, object> {
    private option: any;
    private box: any;
    private myechart: echart.ECharts;
    constructor(props: IProps) {
        super(props);
        const { title, subtitle, seriesName, data, legendData } = this.props;

        this.option = {
            title: {
                text: title,
                subtext: subtitle,
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                bottom: 10,
                left: 'center',
                data: legendData
            },
            series: [
                {
                    name: seriesName,
                    type: 'pie',
                    radius: '50%',
                    center: ['50%', '50%'],
                    data,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
    }
    public render() {
        const {  height } = this.props;
        let rs = (
            <div ref={node => this.box = node} style={{  height, width:height,float:"left" }} />
        );
        return rs;
    }
    public setData(data: any) {
        this.option.series[0].data = data;
        this.myechart.setOption(this.option);
    }

    public componentDidMount() {
        this.myechart = echart.init(this.box);
        this.myechart.setOption(this.option);
    }
}
export default Pie;
